<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
    <script src="filter.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{list-style: none;}
        .warp{
            width: 800px;
            margin: 100px auto;
        }
        .warp>div{margin-bottom: 10px}
        .clear{clear: both;}
        .type, .tag, .tag>li, .tips{float: left}
        .tag>li{
            padding: 5px 10px;
            margin-right: 5px;
            color: #003399;
            border-radius: 2px;
            cursor: pointer;
        }
        .tag .act{
            /*这里要注意权重*/
            background-color: #ff6600;
            color: white;
        }
        .tag>li:hover{
            color: #f60;
            background-color: #f3edc2;
        }

    </style>
</head>
<body>
    <div class="warp">
        <div class="coat">
            <p class="type">上装：</p>
            <ul class="tag">
                <li class="all act">全部</li>
                <li>针织衫</li>
                <li>毛呢外套</li>
                <li>T恤</li>
                <li>羽绒服</li>
                <li>棉衣</li>
                <li>卫衣</li>
                <li>风衣</li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="pants">
            <p class="type">裤装：</p>
            <ul class="tag">
                <li class="all act">全部</li>
                <li>牛仔裤</li>
                <li>小脚/铅笔裤</li>
                <li>休闲裤</li>
                <li>打底裤</li>
                <li>哈伦裤</li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="dress">
            <p class="type">裙装：</p>
            <ul class="tag">
                <li class="all act">全部</li>
                <li>连衣裙</li>
                <li>半身裙</li>
                <li>长袖连衣裙</li>
                <li>中长款连衣裙</li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="selected">
            <p class="type">已选条件：</p>
            <p class="tips">暂时没有选择过滤条件</p>
            <ul class="tag"></ul>
            <div class="clear"></div>
        </div>
    </div>

</body>
</html>